<template>
  <div class="app">
    <!---------- 查询表单form begin ----------->
    <a-form class="smart-query-form">
      <a-row class="smart-query-form-row">
        <a-form-item label="电键" class="smart-query-form-item">
          <a-input style="width: 200px" v-model:value="queryForm.docEntry" placeholder="电键" />
        </a-form-item>
        <a-form-item label="考场名称" class="smart-query-form-item">
          <a-input style="width: 200px" v-model:value="queryForm.romName" placeholder="考场名称" />
        </a-form-item>

        <a-form-item class="smart-query-form-item">
          <a-button-group>
            <a-button type="primary" @click="onSearch">
              <template #icon>
                <SearchOutlined />
              </template>
              查询
            </a-button>
            <a-button @click="resetQuery" class="smart-margin-left10">
              <template #icon>
                <ReloadOutlined />
              </template>
              重置
            </a-button>
          </a-button-group>
        </a-form-item>
      </a-row>
    </a-form>
    <!---------- 查询表单form end ----------->

    <!---------- 表格操作行 begin ----------->
    <a-row class="smart-table-btn-block">
      <a-button-group></a-button-group>
    </a-row>
    <!---------- 表格操作行 end ----------->

    <a-card hoverable>
      <a-table
        :header-height="30"
        :dataSource="data.tableaData"
        :columns="columnsa"
        rowKey="docEntry"
        :loading="tableLoading"
        :scroll="{ x: 1500, y: 450 }"
        :customRow="onRow"
        :pagination="{
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 20,
          pageSizeOptions: ['20', '50', '100', '200'],
        }"
      >
      </a-table>
    </a-card>
    <a-card hoverable>
      <a-tabs v-model:activeKey="data.activeKey">
        <a-tab-pane key="1" tab="数据">
          <a-table
              :header-height="30"
              :scroll="{ x: 1500, y: 450 }"
              :dataSource="data.tablebData"
              :columns="columnsb"
              rowKey="lineNum"
              :loading="tableLoading"
              :pagination="{
              showSizeChanger: true,
              showQuickJumper: true,
              defaultPageSize: 100,
              pageSizeOptions: ['20', '50', '100', '200'],
            }"
          >
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="图表">

        </a-tab-pane>
      </a-tabs>
    </a-card>

    <!---------- 表格 begin ----------->
  </div>
</template>
<script setup>
  import { reactive, ref, onMounted } from 'vue';
  import { examromApi, examromaApi } from '/src/api/business/exam/examrom-api.js';
  import { smartSentry } from '/src/lib/smart-sentry';
  import { columnsa, columnsb } from '/@/views/business/exam/statisticsData/data.js';
  import * as echarts from 'echarts';

  // ---------------------------- 查询数据表单和方法 ----------------------------
  const queryFormState = {
    docEntry: undefined, //电键
    pageNum: 1,
    pageSize: 500,
    romName: '',
  };

  const data = reactive({
    tableaData: [],
    tablebData: [],
    tablecData: [],
    activeKey: '1',
    lineData: {
      openNum: 0,
      actExamNum: 0,
      misExamNum: 0,
      passNum: 0,
    },
  });

  // 查询表单form
  const queryForm = reactive({ ...queryFormState });
  // 表格加载loading
  const tableLoading = ref(false);

  function resetQuery() {
    let pageSize = queryForm.pageSize;
    Object.assign(queryForm, queryFormState);
    queryForm.pageSize = pageSize;
    queryData();
  }

  // 搜索
  function onSearch() {
    queryForm.pageNum = 1;
    queryData();
  }

  // 查询数据
  async function queryData() {
    tableLoading.value = true;
    try {
      let queryResult = await examromApi.statis(queryForm);
      data.tableaData = queryResult.data;
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      tableLoading.value = false;
    }
  }

  function onRow(item) {
    return {
      onClick: () => {
        tableLoading.value = true;
        data.lineData = item;
        examromaApi
          .queryList(item.docEntry)
          .then((res) => {
            data.tablebData = res.data;
            data.tablecData = res.data.map((e) => e.score);
            tableLoading.value = false;
          })
          .finally(() => {

          });
      },
    };
  }


  onMounted(queryData);
</script>

<style scoped lang="less">
  .table-wrap {
    width: 100%;
    height: 600px;
    color: #cccccc;

    .scroll {
      max-height: 278px;
      overflow: hidden;
    }
  }

  .titleContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;

    .tit {
      flex: 0 0 16.6%;
      text-align: center;
    }
  }

  .countContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    font-size: 14px;

    .descr {
      flex: 0 0 16%;
      padding: 10px 0;
      text-align: center;
    }
  }

  .countContent:nth-of-type(odd) {
    background: #318699 !important;

    .descr {
      border-right: 1px solid #247587;
    }
  }
</style>
